<template>
  <n-tabs v-model:value="tabValue" justify-content="start" type="line">
    <n-tab-pane name="list" tab="文章列表">
      <BlogList @edit-blog="toUpdateBlog" />
    </n-tab-pane>
    <n-tab-pane name="add" tab="添加文章">
      <AddBlog :categortyOptions="categortyOptions" />
    </n-tab-pane>
    <n-tab-pane name="update" tab="修改">
      <UpdateBlog
        ref="updateBlog"
        @to-blog-list="tabValue = 'list'"
        :categortyOptions="categortyOptions"
      />
    </n-tab-pane>
  </n-tabs>
</template>
<script setup>
import { ref, inject, onMounted, nextTick } from "vue";
import AddBlog from "./AddBlog.vue";
import BlogList from "./BlogList.vue";
import UpdateBlog from "./UpdateBlog.vue";
// 标签页
const tabValue = ref("list");

const axios = inject("axios");

//分类选项
const categortyOptions = ref([]);
//读取分类
const loadCategorys = async () => {
  let res = await axios.get("/category/list");
  categortyOptions.value = res.data.data.map((item) => {
    return {
      label: item.name,
      value: item.id,
    };
  });
};

// 跳往编辑

const updateBlog = ref();
const toUpdateBlog = async (id) => {
  tabValue.value = "update";

  await nextTick();
  // 注意要等组件加载完之后再调用
  updateBlog.value.loadBlogDetail(id);
};

onMounted(() => {
  loadCategorys();
});
</script>
<style lang="scss"></style>
